<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main_div{
            margin:100px;
            width:710px;
            height:420px;
            border:chartreuse 1px dashed;
        }
        #logo{
            position: relative;
            top:7px;
        }
        a{
            text-decoration:none;
        }
        #title a:first-child{
            font-size:20px;
            color:black;
        }
        #title a:first-child:hover{
            color:#00a1d6;
        }
        #title a:nth-child(n+2){
            margin:0 10px;
            color:black;
            font-size:16px;
        }
        #title a:nth-child(n+2):hover{
            color:#00a1d6;
            border-bottom: 1px solid #00a1d6;
            padding-bottom: 5px;
        }
        #title a:last-child{
            margin:0 0 0 45px;
            color:#00a1d6;
            font-size:14px;
            test-align:center;
            padding:10px 15px 10px 15px;
            width:112px;
            height:40px;
            border:#00a1d6 solid 1px;
            border-radius:5px;

        }
        #title a:last-child:hover{
            color:white;
            padding:10px 0px 10px 0px;
            backgroud=color:#00a1d6;
        }
        #content div{
            width: 210px;
            height: 70px;
            float: left;
            margin: 10px 15px 10px 0px;
        }

        #content img{
            float: left;
        }

        .a_name,.episode{   /*可以同时输入多个元素*/
            color: black;
            font-size: 14px;
            margin: 5px 5px 0 80px;
        }
        .a_name:hover{
            color: #00a1d6;
        }
        .episode{
            color: #00a1d6;
        }
    </style>
</head>
<body>
   <div id="main_div">
       <div id="title">
           <a href="#" target="_blank"><img src="./哔哩哔哩番剧图标.png">番剧</a>
           <a href="#" target="_blank">最新</a>
           <a href="#" target="_blank">周一</a>
           <a href="#" target="_blank">周二</a>
           <a href="#" target="_blank">周三</a>
           <a href="#" target="_blank">周四</a>
           <a href="#" target="_blank">周五</a>
           <a href="#" target="_blank">周六</a>
           <a href="#" target="_blank">周日</a>
           <a href="#" target="_blank">新番时间表</a>
       </div>
       <div id="content">
        <div>
            <a href="#" target="_blank">
                <img src="./b_1.webp">
                <p class="a_name">这是动漫的大标题字数不定。</p>
                <p class="episode">第1话</p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="./b_2.webp">
                <p class="a_name">这是动漫的大标题字数不定。</p>
                <p class="episode">第1话</p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="./b_2.webp">
                <p class="a_name">这是动漫的大标题字数不定。</p>
                <p class="episode">第1话</p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="./b_2.webp">
                <p class="a_name">这是动漫的大标题字数不定。</p>
                <p class="episode">第1话</p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="./b_2.webp">
                <p class="a_name">这是动漫的大标题字数不定。</p>
                <p class="episode">第1话</p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="./b_2.webp">
                <p class="a_name">这是动漫的大标题字数不定。</p>
                <p class="episode">第1话</p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="./b_2.webp">
                <p class="a_name">这是动漫的大标题字数不定。</p>
                <p class="episode">第1话</p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="./b_2.webp">
                <p class="a_name">这是动漫的大标题字数不定。</p>
                <p class="episode">第1话</p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="./b_2.webp">
                <p class="a_name">这是动漫的大标题字数不定。</p>
                <p class="episode">第1话</p>
            </a>
        </div>
        </div>

</body>
</html>